<template>
  <lam-dialog :title="title" v-if="visible" :visible.sync="visible" width="1000px" top="8vh" append-to-body :close-on-click-modal="false" >
    <el-row >
      <el-col :span="12">
        <!-- 用户的角色列表 -->
        <BaseRoleList ref="userRoleList" title="已选角色" :userId="userId" :sumitLoadling="loading" selectType="userRole" :useRemove="true" @remove="handleRemove" />
      </el-col>
      <el-col :span="12">
        <!-- 角色候选列表 -->
        <BaseRoleList ref="selectRoleList" title="待选角色" :userId="userId" :sumitLoadling="loading" selectType="userToSelectRole" :useAdd="true" @add="handleAdd" />
      </el-col>
    </el-row>

    <div slot="footer" class="dialog-footer" style="text-align: center;">
      <el-button type="warning" @click="cancel" :loading="loading">关  闭</el-button>
    </div>

  </lam-dialog>
</template>

<script>
import {httpPost, httpDel} from '@/api';
import BaseRoleList from '@/views/system/role/baseRoleList'

export default {
  name: "UserRole",
  components: {
    BaseRoleList
  },
  data() {
    return {
      title:'用户的角色配置',
      visible: false,
      loading: false,
      userId: '',
      url: {
      	addByUser: '/sys/userRole/addByUser',
      	delByUser: '/sys/userRole/delByUser/'
      },
    };
  },
  created() {
  },
  computed:{
  },
  mounted(){
  },
  methods: {
    getList() {
      this.$refs.userRoleList.getList();
      this.$refs.selectRoleList.getList();
    },

    open(userId){
      this.userId = userId;
      this.visible = true;
      this.$nextTick(()=>{
        this.getList()
      })
    },
    cancel(){
      this.visible = false;
    },

    /** 添加按钮操作 */
    handleAdd(rows) {
      this.loading = true;
      let roleIds = rows.map(item => item.id);
      httpPost(this.url.addByUser, {userId: this.userId, roleId: roleIds.join()}).then(res=>{
        this.msgSuccess("添加成功！");
        this.getList(this.userId)
      }).finally(res=>{
        this.loading = false;
      })
    },

    /** 移除按钮操作 */
    handleRemove(rows) {
      this.loading = true;
      let roleIds = rows.map(item => item.id);
      httpDel(this.url.delByUser + this.userId + '?roleId='+ roleIds.join()).then(res=>{
        this.msgSuccess("移除成功！");
        this.getList(this.userId)
      }).finally(res=>{
        this.loading = false;
      })
    },

  }
};
</script>
